<template>
	<view class="container">
		<view class="user-list x-bc">
			<text class="list-name">头像</text>
			<view class="x-f" @tap="onChooseImg">
				<image class="avatar" :src="avatar ? avatar : userData.picture_image" mode="aspectFill"></image>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user-list x-bc">
			<text class="list-name">昵称</text>
			<view class="x-f">
				<input class="list-val" style="width: 95%;" v-model="userData.nickname" placeholder="请输入昵称"/>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user-list x-bc">
			<text class="list-name">手机号</text>
			<view class="x-f">
				<input class="list-val" style="width: 95%;" v-model="userData.mobile" placeholder="请输入手机号"/>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user-list x-bc">
			<text class="list-name">等级</text>
			<view class="x-f">
				<text class="list-val">{{supperNodeName}}</text>
			</view>
		</view>
		<view class="user-list x-bc">
			<text class="list-name">BLTZ地址</text>
			<view class="x-f">
				<input class="list-val" style="width: 95%;" v-model="userData.walleturl" placeholder="请输入BLTZ地址"/>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="btn-box flex align-center justify-center"><button class="cu-btn confirem-btn" @tap="editUserInfo">保存</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {},
				avatar:"",
				supperNodeName:uni.getStorageSync('supperNodeName'),
				userData:{
					nickname:'',
					mobile:'',
					picture_image_true:'',
					walleturl:uni.getStorageSync('walleturl')
				}
			};
		},
		onLoad(opt) {
			this.getInfo()
		},
		methods: {
			// 选择图片
			onChooseImg() {
				this.$tool.upload("single", 1,'/rest/busi/api/myPhoto').then(res=>{
					this.userData.img = res.data;
					this.avatar = res.showImg;
				})
			},
			getInfo(){
				let _token = uni.getStorageSync('token');
				let userId = uni.getStorageSync('uid');
				let params ={
					_token: _token,
					userId:userId
				}
				this.$api.getInfo(params).then(res => {
					if(res.ok&&res.data){
						if(res.data.realname){
							this.userData.nickname = res.data.realname
						}
						if(res.data.phone){
							this.userData.mobile = res.data.phone
						}
						let url = res.data.wxurl
						let urlObj = url.split('download')
						this.userData.picture_image = urlObj[2] ? urlObj[0]+'download'+urlObj[2] :urlObj[0]+'download'+urlObj[1]
						this.userData.walleturl = res.data.walleturl
					}else{
						this.$msg(res.msg);
					}
				});
			},
			editUserInfo() {
				let data = {
					realname:this.userData.nickname,
					phone:this.userData.mobile,
					wxurl:this.userData.img || this.userData.picture_image_true,
					walleturl:this.userData.walleturl
				}
				this.$api.setInfo(data).then(res => {
					if(res.ok){
						this.$msg(res.msg);
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						}, 1500)
					}else{
						this.$msg(res.msg);
					}
				});
				
			},
		}
	};
</script>

<style lang="scss">
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 20rpx;
		
		.list-name {
			width: 21%;
			font-size: 28rpx;
		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
			// background: #ccc;
		}

		.cuIcon-right {
			margin-left: 25rpx;
		}

		.list-val {
			color: #999;
			font-size: 28rpxc;
			text-align: right;
		}
	}

	.btn-box {
		margin-top: 60rpx;
	
		.confirem-btn {
			width: 710rpx;
			height: 80rpx;
			background: $zhuse;
			// background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border: 1rpx solid rgba(239, 58, 58, 0.22);
			border-radius: 40rpx;
			font-size: 30rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>
